import QtQuick

Rectangle {
    anchors.fill: parent
    color:"#f9fdff"

    signal listDataChanged();//数据更新

    function resetCircleSelect(){
        circleSelect.points = []
        circleSelect.drawing = false
        circleSelect.requestPaint()
    }
    //背景
    Canvas{
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d");
            // 设置线条样式
            ctx.strokeStyle = "#666666";
            ctx.lineWidth = 1;

            // 绘制最左边的边框线
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(0, height);
            ctx.stroke();

            // 绘制最下边的边框线
            ctx.beginPath();
            ctx.moveTo(0, height);
            ctx.lineTo(width, height);
            ctx.stroke();

            ctx.strokeStyle = "#cccccc";

            //对角线
            ctx.beginPath();
            ctx.moveTo(0, height);
            ctx.lineTo(width, 0);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(width, height);
            ctx.stroke();

            //其他分割线
            ctx.beginPath();
            ctx.moveTo(3/4*width, height);
            ctx.lineTo(0, 1/4*height);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(2/4*width, height);
            ctx.lineTo(0, 2/4*height);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(1/4*width, height);
            ctx.lineTo(0, 3/4*height);
            ctx.stroke();

            // 设置文本样式
            ctx.font = "12px 'Helvetica Neue', Arial, sans-serif";
            ctx.fillStyle = "#666666";

            // 文本位置
            var text = "2000";
            var textWidth = ctx.measureText(text).width;
            var textHeight = 12;
            ctx.fillText(text, width - textWidth - 2, height - 5);
            ctx.fillText(text,  2, textHeight);

            text = "1500";
            textWidth = ctx.measureText(text).width;
            ctx.fillText(text, 3/4*width , height - 5);
            ctx.fillText(text,  2, 1/4*height );

            text = "1000";
            textWidth = ctx.measureText(text).width;
            ctx.fillText(text, 2/4*width , height - 5);
            ctx.fillText(text,  2, 2/4*height );

            text = "500";
            textWidth = ctx.measureText(text).width;
            ctx.fillText(text, 1/4*width , height - 5);
            ctx.fillText(text,  2, 3/4*height );

        }
    }
    //散点图
    Canvas{
        id:rrScatterCanvas
        anchors.fill: parent

        property string label1: ""
        property string label2: ""
        property int axisMaxValue: 2000
        property int start: 0
        property int duration: -1
        onPaint: {
            if(duration < 0) return
            var ctx = getContext("2d");
            ctx.clearRect(0, 0, width, height)
            // 获取图像数据
            var imageData = ctx.getImageData(0, 0, width, height);
            var data = beatsModel.getRrScatterChartData(start,duration,width,height,axisMaxValue,label1,label2);
            for (var i = 0; i < data.length; i ++) {
                imageData.data[i] = data[i];
            }
            // 将ImageData绘制到画布上
            ctx.drawImage(imageData, 0, 0);
            //刷新列表数据
            gridViewBeatsList.refreshListInBeatsModelData();
            listDataChanged()
        }
    }
    //圈选组件
    Canvas {
        id: circleSelect
        anchors.fill: parent
        property var points: []
        property bool drawing: false

        onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0, 0, width, height)
            ctx.beginPath()
            ctx.lineWidth = 1
            ctx.strokeStyle = "#0081ff"
            if(points.length > 2){
                ctx.moveTo(points[0][0], points[0][1])
                for (var i = 1; i < points.length; i++) {
                    ctx.lineTo(points[i][0], points[i][1])
                }
                if(!drawing){
                    ctx.lineTo(mouseArea.mouseX, mouseArea.mouseY)
                    ctx.closePath()
                    ctx.fillStyle = "rgba(0, 129, 255, 0.4)"
                    ctx.fill()
                }
                ctx.stroke()
                if(!drawing){
                    Qt.callLater(function() {
                        // console.log(points)
                        let array = [];
                        points.forEach(e=>{
                           array.push([e[0]/width *rrScatterCanvas.axisMaxValue ,(height-e[1])/height *rrScatterCanvas.axisMaxValue])
                        })
                        let n = beatsModel.circleSelectRrScatterChartData(array);
                        // console.log(n)
                        //刷新列表数据
                        gridViewBeatsList.refreshListInBeatsModelCircleSelectBeats();
                        listDataChanged()
                    });
                }
            }
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onPressed: {
                circleSelect.points = []
                circleSelect.points.push([mouseX,mouseY])
                circleSelect.drawing = true
                // circleSelect.requestPaint()
            }
            onPositionChanged: {
                if (circleSelect.drawing) {
                    circleSelect.points.push([mouseX,mouseY])
                    if(circleSelect.points.length > 2) circleSelect.requestPaint()
                }
            }
            onReleased: {
                circleSelect.points.push([mouseX,mouseY])
                circleSelect.drawing = false
                if(circleSelect.points.length > 2) {
                    circleSelect.requestPaint()
                }
            }
        }
    }
    Connections {
        target: switchLabels
        function onCurrentLabelsChange (label1,label2) {
            rrScatterCanvas.label1 = label1
            rrScatterCanvas.label2 = label2
            rrScatterCanvas.requestPaint();
        }
    }
    Connections {
        target: switchAxisMaxValue
        function onAxisMaxValueChange (newValue) {
            rrScatterCanvas.axisMaxValue = newValue
            rrScatterCanvas.requestPaint();
        }
    }
    Connections {
        target: rrIntervalChart
        function onChartSelectedRangeChange (start,duration) {
            rrScatterCanvas.start = start
            rrScatterCanvas.duration = duration
            rrScatterCanvas.requestPaint();
        }
    }
}
